import React from 'react'
import { Button, Card, Icon,Radio } from 'antd'
import './button.less'
const RadioGroup = Radio.Group;
export default class ButtonUi extends React.Component{
    state = {
        isLoading:false,//按钮是否显示在家中
        size:"large"
    }
    handleClick = ()=>{
        this.setState({
            isLoading:!this.state.isLoading
        })
    }
    onChange = (e)=>{
        this.setState({
            size:e.target.value
        })
    }
    render(){
        const size = this.state.size;
        return (
            <div className="b-container">
                <Card title="基础按钮" className="card" hoverable={true}>
                    <Button type="primary">Primory</Button>
                    <Button >默认</Button>
                    <Button type="dashed">虚线</Button>
                    <Button type="danger">危险 </Button>
                    <Button disabled type="primary">disabled</Button>
                </Card>
                <Card title="图形按钮" className="card" hoverable={true}>
                    <Button type="primary" icon="plus">新建</Button>
                    <Button icon="edit">编辑</Button>
                    <Button icon="delete">删除</Button>
                    <Button type="primary" icon="search" shape="circle"> </Button>
                    <Button icon="search" >搜索 </Button>
                    <Button  type="primary" icon="download">下载</Button>
                </Card>
                <Card title="loading按钮" className="card" hoverable={true}>
                    <Button type="primary" icon="plus" loading={this.state.isLoading}>新建</Button>
                    <Button icon="edit" loading={this.state.isLoading}>编辑</Button>
                    <Button icon="delete" loading={this.state.isLoading}>删除</Button>
                    <Button type="primary" icon="search" shape="circle" loading={this.state.isLoading}> </Button>
                    <Button icon="search" loading={this.state.isLoading}>搜索 </Button>
                    <Button type="primary" onClick={this.handleClick}>{this.state.isLoading?"关闭":"打开"}</Button>
                </Card>
                <Card title="按钮组" className="card group" hoverable={true}>
                    <Button.Group size={size}>
                        <Button type="primary" >
                            <Icon type="left" />Backward
                        </Button>
                        <Button type="primary">
                            Forward<Icon type="right" />    
                        </Button>
                    </Button.Group>
                </Card>
                <Card title="按钮尺寸" className="card " hoverable={true}>
                    <RadioGroup onChange={this.onChange} value={this.state.size}>
                        <Radio value={"small"}>small</Radio>
                        <Radio value={"default"}>default</Radio>
                        <Radio value={"large"}>large</Radio>
                    </RadioGroup>
                    <Button type="primary" size={size}>Primory</Button>
                    <Button size={size} >默认</Button>
                    <Button type="dashed" size={size}size={size}>虚线</Button>
                    <Button type="danger" size={size}>危险 </Button>
                    <Button disabled type="primary" size={size}>disabled</Button>
                </Card>
            </div>
        )
    }
}